<template>
  <div class="personal-content">
    <div class="only-setting">
      <div class="title">个人设置</div>
      <div class="portrait">
        <img :src="imgUrl+'/'+user.userpic" alt="" style="width: 100px;height: 100px">
        <div v-if="this.logined==false">
          <span class="ch" @click="to_login()">请登录 ></span>
        </div>
        <div v-if="this.logined==true">
          <span>{{user.name}} </span>
          <span class="ch" @click="dialogFormVisible = true">修改昵称 ></span>
        </div>
      </div>
      <div v-if="this.logined==true">
        <el-button type="text" @click="dialogFormVisible = true">修改个人信息</el-button>
      </div>

      <el-dialog title="修改昵称" :visible.sync="dialogFormVisible">
        <el-form :model="user">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="user.name"></el-input>
          </el-form-item>
          <el-form-item label="手机" :label-width="formLabelWidth">
            <el-input v-model="user.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input v-model="user.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="qq" :label-width="formLabelWidth">
            <el-input v-model="user.qq" autocomplete="off"></el-input>
          </el-form-item>

          <!--          <el-form-item label="性别" :label-width="formLabelWidth">-->
          <!--            <el-select v-model="user.sex" placeholder="请选择性别">-->
          <!--              <el-option label="男" value="1"></el-option>-->
          <!--              <el-option label="女" value="0"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="getUser()" :loading="addLoading">取 消</el-button>
          <el-button type="primary" @click="editUser()" :loading="addLoading">确 定</el-button>
        </div>
      </el-dialog>


      <el-dialog title="修改密码" :visible.sync="pwdFormVisible">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="pwdFormVisible=false" :loading="addLoading">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')" :loading="addLoading">确 定</el-button>
        </div>
      </el-dialog>


      <div class="title">账户设置</div>
      <div class="account">
        <div class="item">
          <div class="ico" style="background-position: -41px 10px"></div>
          <div>
            <p><em>密码</em>已绑定（***********）</p>
            <p>您可以修改密码</p>
          </div>
          <div v-if="this.logined==true">
            <input type="submit" class="submit" @click="pwdFormVisible = true" value="修改密码">
          </div>
        </div>
        <div class="item">
          <div class="ico" style="background-position: 3px 10px"></div>
          <div>
            <p><em>手机</em>{{user.phone}}</p>
            <p>您可以享受手机相关的安全及提醒服务</p>
          </div>
          <div v-if="this.logined==true">
            <input type="submit" class="submit" @click="dialogFormVisible = true" value="修改手机"/>
          </div>
        </div>

        <div class="item">
          <div class="ico" style="background-position: -84px 10px"></div>
          <div>
            <p><em>邮箱</em>{{user.email}}</p>
            <p>您可以享受邮箱相关的安全及提醒服务</p>
          </div>
          <div v-if="this.logined==true">
            <input type="submit" class="submit" @click="dialogFormVisible = true" value="修改邮箱">
          </div>
        </div>
      </div>
      <div class="title">社交账户 <span> 绑定第三方账号，可以直接登录，还可以将内容同步到以下平台，与更多的好友分享</span></div>
      <div class="social">
        <div class="item">
          <div class="ico" style="background-position: -120px 10px"></div>
          <div>
            <p><em>QQ </em>{{user.qq}}</p>
            <p>您可以享受社交帐号相关的安全及提醒服务</p>
          </div>
          <div v-if="this.logined==true">
            <input type="submit" class="submit" @click="dialogFormVisible = true" value="添加绑定">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

    import utilApi from '../../../common/utils'
    import * as settingApi from '../api/setting'

    export default {
        components: {},
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                logined: false,
                dialogFormVisible: false,
                pwdFormVisible: false,
                userId: '',
                user: {
                    name: '',
                    userpic: 'group1/M00/00/00/wKh-bl65lhaAS_0FAAegjh4-P08285.jpg',
                    email: '',
                    phone: '',
                    qq: '',
                    password: '',
                    username: '',
                    utype: '',
                    status: ''
                }, imgUrl: 'http://img.sfs.com/',
                addLoading: false,  //加载效果
                ruleForm: {
                    pass: '',
                    checkPass: ''
                },
                rules: {
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            //获得当前登录用户
            refresh_user: function () {
                let activeUser = utilApi.getActiveUser();
                if (activeUser) {
                    this.logined = true;
                    this.userId = activeUser.userid;
                }
            },
            //取消修改用户
            getUser() {
                this.get_user(this.userId);
                this.addLoading = false;
                this.dialogFormVisible = false;
            },
            //根据用户id获取用户信息
            get_user: function (userId) {
                settingApi.user_get(userId).then((res) => {
                    if (res) {
                        this.user = res;
                    }
                });
            },
            //修改用户信息
            editUser() {
                settingApi.user_edit(this.userId, this.user).then((res) => {
                    console.log(res);
                    //修改成功后重新查询用户
                    this.get_user(this.userId);
                    if (res.success) {
                        this.addLoading = false;
                        this.$message({
                            message: '修改个人信息成功',
                            type: 'success'
                        });
                    } else {
                        this.addLoading = false;
                        if (res.message) {
                            this.$message.error(res.message);
                        } else {
                            this.$message.error('提交失败');
                        }
                    }
                });
                this.dialogFormVisible = false;
            },
            submitForm(formName) {
                //进行密码校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //提交密码修改请求
                        this.editSubmit();
                    } else {
                        console.log('错误提交!!');
                        return false;
                    }
                });
            },
            //提交修改密码
            editSubmit() {
                this.$confirm('确认修改密码吗？', '提示', {}).then(() => {
                    this.addLoading = true;
                    settingApi.user_editPwd(this.userId, this.ruleForm.pass).then((res) => {
                        console.log(res);
                        if (res.success) {
                            this.addLoading = false;
                            this.$message({
                                message: '修改密码成功',
                                type: 'success'
                            });
                            this.get_user(this.userId);
                            this.pwdFormVisible = false;
                        } else {
                            this.addLoading = false;
                            if (res.message) {
                                this.$message.error(res.message);
                            } else {
                                this.$message.error('提交失败');
                            }
                        }
                    });
                    //重新查找用户信息
                    this.get_user(this.userId);
                    this.pwdFormVisible = false;
                });
            },
            //去登陆
            to_login() {
                window.location = "http://ucenter.sfs.com/#/login?returnUrl=" + Base64.encode(window.location)
            }
        },
        mounted() {
            //获取当前登录用户信息
            this.refresh_user();
            //获取用户信息
            this.get_user(this.userId);
        }
    }

</script>

<style>
  @import './../../../../static/css/page-learing-personal-mail.css';

</style>
